<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0
    ,user-scalabel=no,maximum-scale=1.0,minimum-scale=1.0">
    <!--1. 引入CSS文件 -->
    <link rel="stylesheet" href="./css/normalize.css">
    <!-- 2. 引入首页的CSS文件 -->
    <link rel="stylesheet" href="./css/index.css">
    <!-- 3. 引入felexible.js文件 -->
    <script src="./js/flexible.js"></script>
    <!-- 4. 引入首页JavaScript文件 -->
    <script src="./js/index.js"></script>


    <title>民族汇</title>
</head>

<body>
    <!-- 头部 -->
    <header>

        <img src="./icons/标栏.png" alt="" class='bg'>
        <img src="./icons/民族汇.png" alt="">

        <a href="javascript:;">

            <input type="text" value='搜索民族\文化\舞蹈\建筑\服饰\语言'>
        </a>
        <div class='right'>
            <div class="sousuo">
                搜 索
            </div>
        </div>

    </header>

    <!-- 轮播图 -->
    </div>
    <div class="focus">
        <ul>
            <li><img src="images/图片3.png" alt=""></li>
            <!-- 第一张 -->
            <li><img src="images/图片1.png" alt=""></li>
            <li><img src="images/图片2.png" alt=""></li>
            <li><img src="images/图片3.png"></li>
            <!-- 结束 -->
            <li><img src="images/图片1.png" alt=""></li>
        </ul>
        <!-- circle -->
        <ol>
            <li class="current"></li>
            <li></li>
            <li></li>
        </ol>

    </div>



    <!-- Tab栏 -->
    <div class="tab">
        <ul>
            <li><a href="javascript:;"><img src='icons/民族文化.png' alt="">民族故事</a>
            </li>
            <li><a href="javascript:;"><img src="icons/新闻动态.png" alt="">动态资讯</a>
            </li>
            <li><a href="javascript:;"><img src="icons/互动社区.png" alt="">互动社区</a>
            </li>
            <li><a href="javascript:;"><img src="icons/地图.png" alt="">行程路线</a>
                <img src="icons/hot.png" alt="" class='iconSituation'>
            </li>
            <li><a href="javascript:;"><img src="icons/人机交互3D-三维旋转.png" alt="">感知服务</a>
                <img src="icons/new.png" alt="" class='iconSituation'>
            </li>
        </ul>
    </div>
    <!-- 头条轮播图 -->
    <div class="news">
        <div class="big">
            <div class="left">
                <h5>最近更新</h5>
            </div>
            <div class="right">
                <ul class='rightul'>
                    <!-- 第一个news -->
                    <li><span>文化</span>
                        <a href="javascript:;">少数民族地图故事介绍</a>
                    </li>
                    <li><span>介绍</span><a href="javascript:;">民族汇平台指南</a></li>
                    <li><span>服务</span><a href="javascript:;">少数民族三维建筑感知服务</a></li>
                    <!-- 结束 -->
                    <li><span>文化</span>
                        <a href="javascript:;">少数民族地图故事介绍</a>
                    </li>
                </ul>
            </div>
        </div>


    </div>

    <!-- 平台精选模块 -->
    <div class="recommend">
        <div class="header">
            <h5>推荐</h5>
            <div class='change'>
                <div class="refresh"></div> 换一换
            </div>
            <a href="javascript:;">查看更多 ></a>
        </div>

    </div>

    <!-- 底部导航栏模块 -->
    <div class="footer">
        <ul>
            <li class="current"><a href="javascript:;"><img src="icons/首页2.png" alt="">
                    <span>首页</span></a></li>
            <li><a href="javascript:;"> <img src="icons/社区.png" alt="">
                    <span>社区</span></a></li>
            <li>
                <div class="story"><img src="images/地图故事.jpg" alt="" class="first">
                    <img src="images/地图故事2.png" alt="" class="second">
                </div>
            </li>
            <li><a href="javascript:;"><img src="icons/消息.png" alt="">
                    <span>消息</span></a></li>
            <li><a href="javascript:;"><img src="icons/我的.png" alt="">
                    <span>我的</span></a></li>
        </ul>
    </div>



</body>

</html>